<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>练习 - 网页时钟</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .clock {
      width: 600px;
      height: 600px;
      background: url(./images/clock.jpg) no-repeat;
      margin: 50px auto 0;
      position: relative;
    }

    .hh,
    .mm,
    .ss {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: url(./images/hour.png) no-repeat center;
    }

    .mm {
      background-image: url(./images/minute.png);
      transform: rotate(270deg);
    }

    .ss {
      background-image: url(./images/second.png);
      transform: rotate(30deg);
    }
  </style>
</head>

<body>
  <div class="clock">
    <div class="hh"></div>
    <div class="mm"></div>
    <div class="ss"></div>
  </div>
  <script>
    /*
      知识点：
        1. 创建日期对象 获取当前时间
        2. 多次定时器，重复获取时间，让指针动起来
    */

    // 查找页面的元素，定时器调用的函数外面，查找一次即可
    const hour = document.querySelector('.hh')
    const minute = document.querySelector('.mm')
    const second = document.querySelector('.ss')
    // 封装时钟效果，定时器定时调用的函数
    function clock() {
      /* 业务1：获取系统时间 */
      const date = new Date();
      // 获取时分秒
      const hh = date.getHours()
      const mm = date.getMinutes()
      const ss = date.getSeconds()
      /* 业务2：时钟动画效果 */
      // 角度换算： 公式复制即可
      //   小时角度公式：小时 * 30 + 分钟 / 60 * 30 
      //   分钟角度公式：分钟* 6 + 秒 / 60 * 6
      //   秒角度公式： 当前秒数 * 6
      hour.style.transform = `rotate(${hh * 30 + mm / 60 * 30}deg)`
      minute.style.transform = `rotate(${mm * 6 + ss / 60 * 6}deg)`
      second.style.transform = `rotate(${ss * 6}deg)`
    }
    // 主动调用一次，页面加载之后就要调用一次
    clock()
    // 通过定时器每隔一秒钟再调用一次。
    setInterval(clock, 1000)
  </script>
</body>

</html>